import React, { useState } from 'react'

import './tabbar.scss'

const Tabbar = (props) => {
  const { tabbarData } = props

  return (
    <ul className='tabbar'>
      {
        tabbarData.map(item => {
          return (
            <li className='tabbar-item' key={ item.id } style={{ width: `${ parseInt(100 / tabbarData.length) }%` }}>
              <i className={ 'iconfont ' + item.icon } />
              <p className='tabbar-item-title'>{ item.text }</p>
            </li>
          )
        })
      }
    </ul>
  )
}

export default Tabbar